<template>
    <div class="login">
        <p class="tit">加入冲浪词典</p>
        <p class="mode" v-if="isMode" @click="changeMode">使用验证码登录</p>
        <p class="mode" v-if="!isMode"  @click="changeMode">使用密码登录</p>
        <div class="login-way">
            <router-view/>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
    name:"Login",
    data(){
        return{
            isMode:true,
        }
    },
    methods:{
        changeMode(){
            this.isMode=!this.isMode;
            if(this.isMode){
                this.$router.push({path:"/login/login-pass"})
            }else{
                this.$router.push({path:"/login/login-phone"})
            }
        }
    },
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.login{
    margin: 20% auto;
    padding: 0 30px;
}
.mode{
    font-size: 14px;
    color: $moreCol;
    position: absolute;
    top: 30px;
    right: 20px;
}
.tit{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 50px;
}
</style>